export const metadata = {
  title: 'Get Started',
};

<div className='mt-4'>
  <h4 className='text-4xl font-semibold'>Introdcution</h4>
</div>

Create Stunning Cursor Animations with Ease.
Cursify is a powerful library designed to elevate your React and Next.js projects. With an extensive collection of cursor animations, pre-built components, code blocks, and design templates, Cursify empowers you to craft visually stunning landing pages and marketing interfaces effortlessly.

##### Installation

You must install `tailwindcss`. As most of our components use `motion` install it too.

```bash
npm install motion clsx tailwind-merge
```

Must Add it in the `utils.ts`:

```tsx utils.tsx
import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
```

we're using this hooks for most of our components:

```tsx use-mouse.tsx
'use client';
import { type RefObject, useLayoutEffect, useRef, useState } from 'react';

interface MouseState {
  x: number | null;
  y: number | null;
  elementX: number | null;
  elementY: number | null;
  elementPositionX: number | null;
  elementPositionY: number | null;
}

export function useMouse(): [MouseState, RefObject<HTMLDivElement>] {
  const [state, setState] = useState<MouseState>({
    x: null,
    y: null,
    elementX: null,
    elementY: null,
    elementPositionX: null,
    elementPositionY: null,
  });

  const ref = useRef<HTMLDivElement | null>(null);

  useLayoutEffect(() => {
    const handleMouseMove = (event: MouseEvent) => {
      const newState: Partial<MouseState> = {
        x: event.pageX,
        y: event.pageY,
      };

      if (ref.current instanceof Element) {
        const { left, top } = ref.current.getBoundingClientRect();
        const elementPositionX = left + window.scrollX;
        const elementPositionY = top + window.scrollY;
        const elementX = event.pageX - elementPositionX;
        const elementY = event.pageY - elementPositionY;

        newState.elementX = elementX;
        newState.elementY = elementY;
        newState.elementPositionX = elementPositionX;
        newState.elementPositionY = elementPositionY;
      }

      setState((s) => ({
        ...s,
        ...newState,
      }));
    };

    document.addEventListener('mousemove', handleMouseMove);

    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
    };
  }, []);

  return [state, ref];
}
```

##### Story

I was exploring **[Ui-Layouts](https://www.ui-layouts.com/)** components and noticed they didn’t have any mouse events or cursor animations. So, I thought, why not create a Cursor Components Library? I went ahead and built it, but the UI and design process were all manual. I wasn’t using developer-friendly tools like MDX. That’s when **[Naymur](https://x.com/naymur_dev)** reached out to me and said he could completely change the structure—how components are added, how users view and copy them—just like he did in **[Ui-Layouts](https://www.ui-layouts.com/)**. Now, you’re checking out the new version of **Cursify**, which has become an exciting project under **[Ui-Layouts](https://www.ui-layouts.com/)**.

You can follow **[me](https://x.com/bachhav36741)** and **[Naymur](https://x.com/naymur_dev)** to see what we’ve been working on.

<div className='mb-4'></div>
